<template>
  <div>
    <h4>年龄： {{age}}</h4>
    <h4>性别： {{sex}}</h4>
    <h4>爱好： {{hobby}}</h4>
    <h4>幸运数字： {{data.b}}</h4>
    <button @click="addAge()">add age</button>
  </div>
</template>

<script>
  import { reactive, toRefs } from 'vue' 
  export default {
    setup() {
      const durant = reactive({
        age: 32,
        sex: '男',
        hobby: 'basketball',
        data: {
          b: 1
        }
      })

      const addAge = () => {
        durant.age ++
      }

      return {
        ...toRefs(durant),
        addAge
      }
    }
  }
</script>

